<template>
  <div class="about">
    <div v-for="(list,index) in list"
    :key="index"
    class="about_list_container">
      <div>
        <input type="checkbox" v-model="list.checked" @change="check(index,list)">
      </div>
      <div class="about_list_wrapper_img">
        <img :src="list.productImage"/>
      </div>
      <div>
        <div>{{list.productName}}</div>
        <div>{{list.salePrice | salePrice}}</div>
      </div>
      <div class="button_wrapper">
          <van-stepper v-model="list.count"/>
      </div>
    </div>
    <div style="width:100%;height:68px"></div>
    <div class="priceMax">
      <div><input type="checkbox" v-model="checkedall" @click="onCheckall">全选</div>
      <div>总价:{{Price}}</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Stepper } from 'vant';

Vue.use(Stepper);
import axios from "axios";
export default {
  data(){
    return{
      list:[],
      // checked:false,
      checkedall:false,
      item:[],
      // value:1,
      price:0,
      checkData:[]
    }
  },
  mounted(){
    axios.get("http://localhost:8080/data.json").then((res)=>{
      this.list = res.data.result.list;
       console.log(this.list);
    }).catch((error)=>{
      console.log(error);
    })
    // this.value = this.$store.state.value;
  },
  filters:{
    salePrice(val){
      return '￥' + val;
    }
  },
  methods:{
    check(index,list){
      console.log(index,list);
      this.list.forEach(item=>{
         if (this.list[index].checked == false ) {
           if(item.checked == false){
             this.checkedall = false
           }
        }
        console.log(item.checked);
        if(item.checked == true){
          this.checkedall = true
        }
      })
    },
    onCheckall(){
       this.list.forEach(item=>{
         if(this.checkedall == true){
           item.checked = !true
          }else{
            item.checked = !false
          }
     })
    }
  },
  computed:{
    Price(){
      var priceMax = 0;
      this.list.forEach((item)=>{
        priceMax += item.count * item.salePrice
      })
      return priceMax
    }
    
  }
}
</script>

<style>
  .about_list_container
  {
    width: 100%;
    height:150px;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .about_list_wrapper_img
  {
    width: 20%;
  }
  .about_list_wrapper_img img
  {
    width: 100%;
  }
  .button_wrapper
  {
    width: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .priceMax
  {
    width: 100%;
    height:68px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left:0;
    background: white;    
  }
</style>
